<template>
  <div>
    <el-card shadow="hover" style="margin-bottom: 20px">
      <div style="display: flex; justify-content: space-between;">
        <el-form :inline="true" style="height: 40px">
          <el-form-item label="项目名">
            <el-input placeholder="搜索项目名" prefix-icon="el-icon-search" v-model="queryParams.projectName"></el-input>
          </el-form-item>
          <el-form-item label="项目类型">
            <el-select v-model="queryParams.projectType" clearable  placeholder="请选择项目类型">
              <el-option v-for="dict in ctbaProjectType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
            </el-select>
          </el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
          <el-button type="danger" @click="resetData()">清空</el-button>
        </el-form>
        <el-button v-waves type="primary" @click="newProject()" icon="el-icon-plus"> 新建项目</el-button>
      </div>
    </el-card>

    <el-row>
      <el-skeleton :rows="6" animated :loading="loading" />
      <el-empty v-if="!projects.length && loading===false" description="无数据"></el-empty>
      <el-col v-else v-for="item in projects" v-loading="loading" style="margin-right: 20px;margin-bottom: 20px" :key="item.id" :span="5">
        <el-card shadow="hover" >
          <div slot="header" class="clearfix">
            <i class="el-icon-folder-opened" />
            <span style="margin-left: 5px">{{ item.projectName }}</span>

            <div style="display: inline-block; float: right; cursor: pointer" @click="doEdit(item)">
              <el-tooltip effect="dark" content="编辑项目" placement="top">
                <i class="el-icon-edit-outline" style="margin-left: 15px" />
              </el-tooltip>
            </div>
          </div>
          <div>
            <ul  class="role-info">
              <li>
                <div class="role-left" >项目类型：{{toProjectType(item.projectType)}}</div>
              </li>
              <li>
                <div  class="role-left">
                  创建时间：{{item.createTime}}
                </div>
              </li>
            </ul>
          </div>
          <div style="display: inline-block; float: left; cursor: pointer" @click="toDetail(item)">
            <el-tooltip effect="dark" content="项目详情" placement="bottom">
              <i class="el-icon-menu" />
            </el-tooltip>
          </div>
          <div style="display: inline-block; float: right; cursor: pointer" @click="doDelete(item)">
            <el-tooltip effect="dark" content="删除项目" placement="bottom">
              <i class="el-icon-delete" style="margin-left: 15px" />
            </el-tooltip>
          </div>
        </el-card>
      </el-col>
    </el-row>


      <!-- 分页组件 -->
      <el-pagination
          :current-page="queryParams.pageNum"
          :total="total"
          :page-size="queryParams.pageSize"
          :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="changePageSize"
          @current-change="changeCurrentPage"
      />

    <el-dialog :title="dialog.title" :visible.sync="dialog.visible" width="500px" append-to-body @close="fetchData">
      <el-form ref="projectFormRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="项目名" prop="projectName">
          <el-input v-model="form.projectName" placeholder="请输入项目名" />
        </el-form-item>
        <el-form-item label="项目类型" prop="projectType">
          <el-select v-model="form.projectType" placeholder="请选择项目类型">
            <el-option v-for="dict in ctbaProjectType" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Waves from "@/directives/waves/waves";
import {getProjectType, getProjects, updateProject, delProject, addProject} from "@/api/myProject";
export default {
  directives:{Waves},
  name: "MyProject",
  data(){
    return{
      loading:false,
      queryParams:{
        projectName:'',
        projectType:'',
        pageNum:1,
        pageSize:10,
      },
      ctbaProjectType:[],
      projects: [],
      total:0,
      dialog:{
        title:"",
        visible:false,
        type:0
      },
      form:{
        projectName:"",
        projectType:""
      },
    }
  },
  methods:{
    //新建项目
    newProject(){
      this.dialog.visible=true;
      this.dialog.title="新建项目";
      this.dialog.type=2;//type为2表示新建
    },
    //删除项目
    doDelete(item){
      const projectName=item.projectName
      this.$confirm('是否确认删除"'+ projectName+ '"工程?该工程下的所有数据都会被删除！', 'EasyCTBA', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delProject(item.id).then(()=>{
          this.fetchData()
          this.$notify({
            title: 'EasyCTBA',
            message: '删除成功！',
            type: 'success',
            duration: '2000',
            offset: 100
          });
        })
      }).catch(() => {
        this.fetchData()
        this.$notify({
          title: 'EasyCTBA',
          message: '取消删除！',
          type: 'warning',
          duration: '2000',
          offset: 100
        });
      });
    },
    //编辑项目
    doEdit(item){
      this.dialog.visible=true;
      this.dialog.title="编辑项目"
      this.dialog.type=1;//type为1表示修改
      this.form=item
    },
    toDetail(item){
      const type=item.projectType
      if (type==="InformationEntropy"){
        this.$router.push({
          path:'/home/InformationEntropy',
          query:{  id:item.id  }
        })
      }else if (type==="FIAS"){
        this.$router.push({
          path:'/home/FIAS',
          query:{  id:item.id  }
        })
      }else if (type==="ST"){
        this.$router.push({
          path:'/home/ST',
          query:{  id:item.id  }
        })
      }else if (type==="SP"){
        this.$router.push({
          path:'/home/SP',
          query:{  id:item.id  }
        })
      }
    },
    //转换项目类型
    toProjectType(projectType){
      const ctbaProjectType=this.ctbaProjectType;
      for (const x of ctbaProjectType) {
        if(projectType===x.dictValue){
          return x.dictLabel;
        }
      }
    },
    getProjectType(){
      getProjectType().then((res)=>{
        this.ctbaProjectType=res.data
      })
    },
    fetchData() {
      this.loading=true
      getProjects(this.queryParams).then(res=>{
        this.projects=res.rows;
        this.total=res.total;
        this.loading=false
      }).catch(()=>{
        this.loading=false
      })

    },
    resetData() {
      this.queryParams = {}
      this.fetchData()
    },
    // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
    changePageSize(size) {
      this.queryParams.pageSize = size
      this.fetchData()
    },
    // 改变页码，page：回调参数，表示当前选中的“页码”
    changeCurrentPage(page) {
      this.queryParams.pageNum = page
      this.fetchData()
    },
    cancel(){
      this.dialog.visible=false;
      this.fetchData()
    },
    //提交表单
    submitForm(){
      this.$refs.projectFormRef.validate(valid => {
        if (valid) {
          if(this.dialog.type===1){
            updateProject(this.form).then(()=>{
              this.dialog.visible=false
              this.fetchData()

              this.$notify({
                title: 'EasyCTBA',
                message: '修改成功！',
                type: 'success',
                duration: '2000',
                offset: 100
              });
            })
          }else if (this.dialog.type===2){
            addProject(this.form).then(()=>{
              this.dialog.visible=false
              this.fetchData()

              this.$notify({
                title: 'EasyCTBA',
                message: '新建成功！',
                type: 'success',
                duration: '2000',
                offset: 100
              });
            })
          }
        }
      });
    }
  },
  created() {
    this.getProjectType()
  },
  mounted() {
    this.fetchData()
  },
  computed:{
    rules(){
      return{
        projectName: [
          { required: true, message: "项目名不能为空", trigger: "blur" }
        ],
        projectType: [
          { required: true, message: "项目类型不能为空", trigger: "change" }
        ],
      }
    }
  }
}
</script>

<style scoped>
li {
  border-bottom: 1px solid #f0f3f4;
  padding: 11px 0;
  font-size: 12px;
}
.role-left {
  color: rgb(148, 137, 137);
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
  text-overflow: ellipsis;
}
.role-info {
  margin-top: 0;
  padding-top: 0;
  padding-left: 0;
  list-style: none;
}
</style>